<template>
  <div class="page-container">
    <div class="in-container content">
      <div class="top-container">
        <div class="searchType">
          <el-row :gutter="32">
            <el-col :span="4">
              <el-form-item label="企业代码">
                <el-input
                  v-model="query.comCode"
                  style="width: 225.5px"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="企业名称">
                <el-input
                  v-model="query.comNameCn"
                  style="width: 225.5px"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="企业状态">
                <el-select
                  v-model="query.AuditState"
                  placeholder="请输入"
                  filterable
                  style="width: 225.5px"
                  clearable
                >
                  <el-option
                    v-for="item in this.searchItems.enterpriseStateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="search_btn">
          <el-button type="primary" @click="initData()">查询</el-button>
          <el-button @click="reset">清空</el-button>
        </div>
      </div>
      <div class="bottom_content" v-loading="loading">
        <el-row :gutter="8">
          <el-col :span="24">
            <div class="btn-box">
              <div class="btn_left">
                <el-button type="primary" @click="createNewCusBus"
                  >新增</el-button
                >
                <el-dropdown
                  style="margin-left: 10px"
                  @command="changeEnterpriseStatus"
                >
                  <el-button type="primary">
                    确认审核
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item style="min-width: 90px" command="1"
                        >提交</el-dropdown-item
                      >
                      <el-dropdown-item command="2">通过</el-dropdown-item>
                      <el-dropdown-item command="-1">驳回</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button @click="deleteSelectData" style="margin-left: 10px"
                  >批量删除</el-button
                >
              </div>
              <div class="btn_right">
                <el-button size="small">
                  <el-icon style="margin-right: 2px; margin-bottom: 2px"
                    ><RefreshRight /></el-icon
                  >刷新
                </el-button>
              </div>
            </div>
            <AppPageTable
              stripe
              height="100%"
              :data="typeDetailTableData.data"
              width="100%"
              :option="typeDetailTableData.option"
              @change="initData()"
            >
              <el-table-column align="center" type="selection" width="50" />
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="comCode"
                label="企业代码"
              >
                <template #default="scope">
                  <span
                    style="color: #409eff; cursor: pointer"
                    @click="turnToUpdate(scope.row)"
                  >
                    {{ scope.row.comCode }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="comNameCn"
                label="中文名称"
              />
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="shortName"
                label="企业简称"
              />
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="comType"
                label="企业类型"
              />
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="businessCategory"
                label="经营类目"
              />
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="country"
                label="国家"
              >
                <template #default="scope">
                  <span>
                    {{ scope.row.country }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="district"
                label="地区"
                width="130"
              >
                <template #default="scope">
                  <span>
                    {{ scope.row.district }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="city"
                label="城市"
              >
                <template #default="scope">
                  <span>
                    {{ scope.row.city }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="telePhone"
                label="电话"
              >
                <template #default="scope">
                  <span>
                    {{ scope.row.telePhone }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="email"
                label="邮箱"
              >
                <template #default="scope">
                  <span>
                    {{ scope.row.email }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="auditState"
                label="状态"
                width="130"
              >
                <template #default="scope">
                  {{
                    this.searchItems.enterpriseStateOptions.filter(
                      (item) => item.value === scope.row.auditState
                    )[0].label
                  }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="customerAttributes"
                label="客户属性"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.customerAttributes"
                    style="color: #409eff; cursor: pointer"
                    @click="showCustomerAttribute(scope.row)"
                    >有
                  </span>
                  <span v-else> -- </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="creditLimit"
                label="信誉额度"
                width="130"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.creditLimit"
                    style="color: #409eff; cursor: pointer"
                    @click="showCreditLimit(scope.row)"
                    >有
                  </span>
                  <span v-else> -- </span>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="agreementDocumentation"
                label="协议文档"
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.agreementDocumentation"
                    style="color: #409eff; cursor: pointer"
                    @click="showProtocolDocument(scope.row)"
                    >有
                  </span>
                  <span v-else> -- </span>
                </template>
              </el-table-column>
            </AppPageTable>
          </el-col>
        </el-row>
      </div>

      <!-- 创建客商 -->
      <el-dialog
        class="create_business"
        title="创建客商"
        v-model="dialogData.cur_bus_show"
        width="548px"
      >
        <el-form
          :model="formData"
          :rules="formRules"
          label-width="80px"
          label-suffix=":"
          ref="form"
        >
          <el-row>
            <el-col>
              <el-form-item label="企业代码" prop="comCode">
                <el-input
                  v-model="formData.comCode"
                  style="width: 320px"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="企业名称" prop="comNameCn">
                <el-input
                  v-model="formData.comNameCn"
                  style="width: 320px"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="企业简称" prop="shortName">
                <el-input
                  v-model="formData.shortName"
                  style="width: 320px"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="企业类型" prop="entTypeChecked">
                <el-checkbox-group v-model="this.formData.entTypeChecked">
                  <el-checkbox
                    v-for="item in this.formData.entTypes"
                    @change="getEnterpriseType"
                    class="enterprise_Type"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="经营类目" prop="checkedEnterpriseTypes">
                <div style="width: 100%">
                  <el-checkbox
                    v-model="this.formData.checkAll"
                    @change="changeCheckAll"
                    label="全选"
                    size="small"
                  />
                </div>
                <el-checkbox-group
                  v-model="this.formData.checkedEnterpriseTypes"
                >
                  <el-checkbox
                    v-for="item in this.formData.enterpriseType"
                    @change="getemterList"
                    class="enterprise_Type"
                    :label="item"
                    :value="item"
                  />
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button
              @click="dialogData.cur_bus_show = false"
              type="default"
              size="small"
              >取消</el-button
            >
            <el-button
              type="primary"
              size="small"
              style="background: #5d9df5"
              @click="next"
            >
              创建保存
            </el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 查看客户属性 -->
      <el-dialog title="客户属性" v-model="dialogData.bank_show" width="1248px">
        <el-form
          :model="customerAttributeData"
          :rules="formRules"
          label-width="100px"
          label-suffix=":"
          ref="form"
        >
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item
                class="special"
                label="客户等级"
                prop="customerLevel"
              >
                <el-select
                  v-model.trim="formData.customerRating"
                  filterable
                  clearable
                  disabled
                  placeholder="请选择"
                  size="small"
                  fit-input-width
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船公司" prop="entName">
                <el-select
                  v-model.trim="customerAttributeData.shipOwnerId"
                  filterable
                  clearable
                  placeholder="请输入后搜索"
                  size="small"
                  disabled
                  fit-input-width
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目的港" prop="destinationPort">
                <el-select
                  v-model.trim="customerAttributeData.destinationPort"
                  filterable
                  clearable
                  placeholder="请输入后搜索"
                  size="small"
                  disabled
                  fit-input-width
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品名" prop="nameOfGoods">
                <el-input
                  v-model.trim="customerAttributeData.nameOfGoods"
                  clearable
                  placeholder="请输入"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item
                class="special"
                label="订舱锁定"
                prop="bookingLockFlag"
              >
                <div style="display: flex; width: 100%">
                  <el-checkbox
                    v-model="customerAttributeData.bookingLockFlag"
                    label=""
                    disabled
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                class="special"
                label="锁定原因"
                prop="bookingLockCause"
              >
                <el-input
                  v-model.trim="customerAttributeData.bookingLockCause"
                  clearable
                  placeholder="请输入原因"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="费用锁定" prop="ffeesLockFlag">
                <div style="display: flex; width: 100%">
                  <el-checkbox
                    v-model="customerAttributeData.ffeesLockFlag"
                    label=""
                    disabled
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="锁定原因" prop="feesLockCause">
                <el-input
                  v-model.trim="customerAttributeData.feesLockCause"
                  clearable
                  placeholder="请输入原因"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item
                class="special"
                label="客户来源"
                prop="customerSource"
              >
                <el-select
                  v-model.trim="customerAttributeData.customerSource"
                  filterable
                  clearable
                  placeholder="请选择"
                  size="small"
                  disabled
                  fit-input-width
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开发进度" prop="developmentStatus">
                <el-select
                  v-model.trim="customerAttributeData.developmentStatus"
                  filterable
                  clearable
                  placeholder="请选择"
                  size="small"
                  disabled
                  fit-input-width
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="付款习惯" prop="paymentHabits">
                <el-select
                  v-model.trim="customerAttributeData.paymentHabits"
                  filterable
                  clearable
                  placeholder="请选择"
                  size="small"
                  disabled
                  fit-input-width
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="12">
              <el-form-item
                class="special"
                label="竞争对手分析"
                prop="competitorAnalytics"
              >
                <el-input
                  v-model.trim="customerAttributeData.competitorAnalytics"
                  clearable
                  disabled
                  fit-input-width
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="12">
              <el-form-item
                class="special"
                label="出口代理商信息"
                prop="entCode"
              >
                <el-input
                  v-model.trim="customerAttributeData.exportAgentInfo"
                  clearable
                  disabled
                  fit-input-width
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="12">
              <el-form-item class="special" label="备注" prop="remark">
                <el-input
                  v-model.trim="customerAttributeData.remark"
                  clearable
                  fit-input-width
                  :rows="2"
                  disabled
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <!-- 查看信誉额度 -->
      <el-dialog
        title="信誉额度"
        v-model="dialogData.creditLimit_show"
        width="1248px"
      >
        <el-form :model="creditLimitData">
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item
                class="special"
                label="信誉等级"
                prop="creditRating"
              >
                <el-select
                  v-model.trim="creditLimitData.creditRating"
                  filterable
                  clearable
                  placeholder="请选择"
                  size="small"
                  fit-input-width
                  disabled
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="信誉额度" prop="creditAmount">
                <el-input
                  v-model.trim="creditLimitData.creditAmount"
                  clearable
                  placeholder="请输入"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="款期额度" prop="periodAmount">
                <el-input
                  v-model.trim="creditLimitData.periodAmount"
                  clearable
                  placeholder="请输入"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算方式" prop="paymentMode">
                <el-select
                  v-model.trim="creditLimitData.paymentMode"
                  filterable
                  clearable
                  placeholder="请选择"
                  size="small"
                  fit-input-width
                  disabled
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item
                class="special"
                label="付款周期"
                prop="paymentCycle"
              >
                <el-select
                  v-model.trim="creditLimitData.paymentCycle"
                  filterable
                  clearable
                  placeholder="请选择"
                  size="small"
                  fit-input-width
                  disabled
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model.trim="creditLimitData.remark"
                  clearable
                  placeholder="请输入"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item class="special" label="修改人员" prop="updateBy">
                <el-input
                  v-model.trim="creditLimitData.updateBy"
                  clearable
                  disabled
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="修改时间" prop="updateTime">
                <el-input
                  v-model.trim="creditLimitData.updateTime"
                  clearable
                  disabled
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>

      <!-- 查看协议文档 -->
      <el-dialog
        title="协议文档"
        v-model="dialogData.protocolDocument_show"
        width="1248px"
      >
        <el-table
          border
          :data="protocolDocumentData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :cell-class-name="tableCellClassName"
          @cell-click="cellClick"
          v-loading="loading"
        >
          <el-table-column align="center" type="selection" width="50" fixed />
          <el-table-column align="center" label="协议种类" prop="protocolType">
            <template #default="scope">
              <div
                v-if="
                  scope.row.index === rowIndex &&
                  scope.column.index === columnIndex
                "
              >
                <selectDown
                  v-model:modelData="scope.row.protocolType"
                  ref="truckCodeRef"
                  placeholder="请输入"
                  urlType="currency"
                  urlQueryData="账户类别"
                  @getOption="getTruckCodeData($event, scope.$index)"
                  disabled
                >
                </selectDown>
              </div>
              <span v-else>
                {{ scope.row.protocolType }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="160"
            label="协议编号"
            prop="protocolCode"
          >
            <template #default="scope">
              <div
                v-if="
                  scope.row.index === rowIndex &&
                  scope.column.index === columnIndex
                "
              >
                <el-input
                  v-model="scope.row.protocolCode"
                  ref="ctnSealRef"
                  clearable
                  size="small"
                  placeholder="请输入"
                  disabled
                ></el-input>
              </div>
              <span v-else>
                {{ scope.row.protocolCode }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="430"
            label="协议期限"
            prop="protocolDate"
          >
            <template #default="scope">
              <div
                v-if="
                  scope.row.index === rowIndex &&
                  scope.column.index === columnIndex
                "
              >
                <el-date-picker
                  v-model="scope.row.protocolDate"
                  type="datetimerange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  disabled
                />
              </div>
              <span v-else>
                {{ scope.row.beginDate }} - {{ scope.row.endDate }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="签订时间"
            prop="signDate"
            width="240"
          >
            <template #default="scope">
              <div
                v-if="
                  scope.row.index === rowIndex &&
                  scope.column.index === columnIndex
                "
              >
                <el-date-picker
                  v-model="scope.row.signDate"
                  type="datetime"
                  placeholder="请选择"
                  disabled
                />
              </div>
              <span v-else>
                {{ scope.row.signDate }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="签订人" prop="singer">
            <template #default="scope">
              <div
                v-if="
                  scope.row.index === rowIndex &&
                  scope.column.index === columnIndex
                "
              >
                <el-input
                  v-model="scope.row.singer"
                  ref="ctnSealRef"
                  clearable
                  size="small"
                  disabled
                >
                </el-input>
              </div>
              <span v-else>
                {{ scope.row.singer }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注" prop="remark">
            <template #default="scope">
              <div
                v-if="
                  scope.row.index === rowIndex &&
                  scope.column.index === columnIndex
                "
              >
                <el-input
                  v-model="scope.row.remark"
                  ref="ctnSealRef"
                  clearable
                  size="small"
                  disabled
                >
                </el-input>
              </div>
              <span v-else>
                {{ scope.row.remark }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppTitleBox from "@/components/AppTitleBox.vue";
import selectDown from "./selectDown.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    AppTitleBox,
    selectDown,
  },
  data() {
    return {
      // 类型列表
      typeData: [],
      //详情表格数据
      typeDetailTableData: {
        id: "",
        dictName: "",
        data: [],
        option: useTableOption(),
      },
      activeIndex: 0,
      searchItems: {
        enterpriseStateOptions: [
          {
            label: "草拟",
            value: "0",
          },
          {
            label: "待审",
            value: "1",
          },
          {
            label: "已审",
            value: "2",
          },
          {
            label: "驳回",
            value: "-1",
          },
        ], //企业状态选项
      },
      query: {
        comCode: "", //企业代码
        comNameCn: "", //企业名称
        AuditState: "", //企业状态
      },
      dialogData: {
        cur_bus_show: false,
        customAttributes_show: false, //客户属性
        creditLimit_show: false, // 信誉额度
        protocolDocument_show: false, // 协议文档
      },
      formData: {
        id: 0,
        createBy: "",
        createTime: "2024-05-15T09:30:30.595Z",
        updateBy: "string",
        updateTime: "",
        isDeleted: true,
        comCode: "",
        isCustomer: true,
        isSupplier: true,
        isOverseaAgent: true,
        comName: "",
        comNameCn: "",
        regAddress: "",
        country: "",
        district: "",
        city: "",
        taxNumber: "",
        levelNo: 0,
        shortName: "",
        comNature: "",
        telePhone: "",
        fax: "",
        email: "",
        zipCode: "",
        website: "",
        cargoSource: "",
        remark: "",
        comStateId: 0,
        comType: "",
        comCategory: "",
        businessCategory: "",
        auditState: 0,

        checkAll: false, //全选按钮选中状态
        enterpriseType: [], //企业类别
        enterpriseTypes: [], //企业类别
        checkedEnterpriseTypes: [],
        businessCategorys: [],
        entType: [],
        entTypes: [],
        entTypeChecked: [],
      },
      formRules: {
        comCode: [
          { required: true, message: "请输入企业代码", trigger: "blur" },
        ],
        comNameCn: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        shortName: [
          { required: true, message: "请选择企业简称", trigger: "blur" },
        ],
        entTypeChecked: [
          { required: true, message: "请选择企业类型", trigger: "blur" },
        ],
        checkedEnterpriseTypes: [
          { required: true, message: "请选择经营类目", trigger: "blur" },
        ],
      },
      customerAttributeData: {
        //客户属性
        id: 0,
        createBy: "",
        createTime: "2024-05-21T03:47:22.019Z",
        updateBy: "",
        updateTime: "",
        isDeleted: true,
        contactComId: 0,
        customerRating: "",
        shipOwnerId: "",
        destinationPort: "",
        nameOfGoods: "",
        competitorAnalytics: "",
        exportAgentInfo: "",
        bookingLockFlag: false,
        bookingLockCause: "",
        ffeesLockFlag: false,
        feesLockCause: "",
        customerSource: "",
        paymentHabits: "",
        developmentStatus: "",
        remark: "",
      },
      creditLimitData: {
        //信誉额度
        contactComId: "",
        createBy: "",
        createTime: "",
        creditAmount: 0,
        creditRating: "",
        customerRating: "",
        id: "",
        isDeleted: false,
        paymentCycle: 0,
        paymentMode: "",
        periodAmount: 0,
        relationType: "",
        remark: "",
        updateBy: "",
        updateTime: "",
      },
      protocolDocumentData: [], //协议文档
      shipCompanyOption: [], //船公司下拉表
    };
  },
  emits: ["update:checkAll"],
  methods: {
    parseTime(data) {
      if (data) {
        return dayjs(data).format("YYYY-MM-DD");
      }
      return "";
    },
    initData() {
      this.typeDetailTableData.option.loading = true;
      this.$http
        .get("/api/crcontactcompany/querypagedto", {
          ComCode: this.query.comCode,
          ComNameCn: this.query.comNameCn,
          AuditState: this.query.AuditState,
          PageIndex: this.typeDetailTableData.option.page,
          PageSize: this.typeDetailTableData.option.pageSize,
        })
        .then((res) => {
          console.log("客户列表", res);

          //获取字典数据
          this.$http.get("/api/basedict/query").then((res) => {
            console.log('数据字典', res);
            // 获取企业类型
            this.$http.get("/api/basedictdetail/query", {
                DictId: res.content.filter(
                  (item) => item.name == "企业类型"
                )[0].id,
                DictName: "",
                KeyWords: "",
              }).then((res) => {
                this.formData.entTypes = res.content;
                this.formData.entType = res.content.map((item) => {
                  return item.label;
                });
              });
            // 获取经营类目
            this.$http
              .get("/api/basedictdetail/query", {
                DictId: res.content.filter(
                  (item) => item.name == "经营类目"
                )[0].id,
                DictName: "",
                KeyWords: "",
              })
              .then((res) => {
                this.formData.enterpriseTypes = res.content
                  .map((item) => {
                    item.dictSort = Number(item.dictSort);
                    return item;
                  })
                  .sort((a, b) => {
                    return a.dictSort - b.dictSort;
                  });
                this.formData.enterpriseType =
                  this.formData.enterpriseTypes.map((item) => {
                    return item.value;
                  });
              });
          });

          this.typeDetailTableData.option.total = res.totalElements;
          console.log("res.content", res.content);
          this.typeDetailTableData.data = res.content;
        })
        .finally(() => {
          this.typeDetailTableData.option.loading = false;
        });
    },
    createNewCusBus() {
      this.dialogData.cur_bus_show = true;
    },
    reset() {
      this.query = {
        comCode: "",
        comNameCn: "",
        AuditState: "",
      };
      this.typeDetailTableData.option.page = 1;
      this.typeDetailTableData.option.pageSize = 15;
      this.initData();
    },
    turnToUpdate(row) {
      this.$router.openTab({
        path: "/enterprise/enterpriseDetail",
        query: {
          title: `详细信息`,
          id: row.id,
        },
      });
    },
    async next() {
      await this.$refs.form.validate();
      this.formData.businessCategory =
        this.formData.checkedEnterpriseTypes.join(",");
      // this.formData.businessCategory = this.formData.businessCategory.join(',')

      this.$http
        .post("/api/crcontactcompany/create", this.formData)
        .then((res) => {
          if (res.status) {
            this.$router.openTab({
              path: "/enterprise/enterpriseDetail",
              query: {
                title: `新增客商`,
                id: res.data,
              },
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },
    changeCheckAll(e) {
      e == true
        ? (this.formData.checkedEnterpriseTypes = this.formData.enterpriseType)
        : (this.formData.checkedEnterpriseTypes = []);
    },
    translateComState(stateid, option) {
      if (option.filter((item) => item.id == stateid).length <= 0) {
        return "--";
      }
      //企业状态转换函数
      return option.filter((item) => item.id == stateid)[0].label;
    },
    // 批量删除
    deleteSelectData() {
      let deleteSelectArray = [];
      if (this.typeDetailTableData.option.selected.length == 0) {
        this.$message.warning("请选择一条数据");
        return;
      }
      this.typeDetailTableData.option.selected.forEach((t) =>
        deleteSelectArray.push(t.id)
      );
      ElMessageBox.confirm("确定删除所选客户信息吗", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/api/crcontactcompany/delete", {
              idArray: deleteSelectArray,
            })
            .then((res) => {
              if (res.status) {
                this.$message.success(res.message);
                this.initData();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    getEnterpriseType() {
      this.formData.comType = this.formData.entTypeChecked.join(",");
    },
    getemterList() {
      this.formData.businessCategory =
        this.formData.checkedEnterpriseTypes.join(",");
    },
    changeEnterpriseStatus(e) {
      //更改审核状态
      let examineSelectArray = [];
      if (this.typeDetailTableData.option.selected.length == 0) {
        this.$message.warning("请选择一条数据");
        return;
      }
      this.typeDetailTableData.option.selected.forEach((item) => {
        examineSelectArray.push(item.id);
      });
      this.$http
        .post("/api/crcontactcompany/checkTable", {
          ids: examineSelectArray,
          checkStatus: e,
        })
        .then((res) => {
          console.log("===res===", res);
          if (res.status) {
            this.$message.success(res.message);
            this.initData();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    translateShipLabel(option, id) {
      //将船公司id转换为中文全称
      if (option.filter((item) => item.id == id).length) {
        return option.filter((item) => item.id == id)[0].nameCh;
      }
      return "";
    },
    // 列表客户属性有点击
    async showCustomerAttribute(row) {
      await this.$http
        .get("/api/crcustomer/querybyid", {
          Id: row.id,
        })
        .then(async (res) => {
          // console.log("客户属性", res);
          if (res.status) {
            let shipres = await this.$http.get("/api/csshipcompany/query");
            this.shipCompanyOption = shipres.content;

            res.data.shipOwnerId = this.translateShipLabel(
              this.shipCompanyOption,
              res.data.shipOwnerId
            );
            this.customerAttributeData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });

      this.dialogData.bank_show = true;
    },
    async showCreditLimit(row) {
      //信誉额度
      let res = await this.$http.get("/api/crcredit/querybyid", { Id: row.id });
      console.log(res);
      if (res.status) {
        this.creditLimitData = res.data;
      } else {
        this.$message.error(res.message);
      }

      this.dialogData.creditLimit_show = true;
    },
    async showProtocolDocument(row) {
      let res = await this.$http.get("/api/crprotocol/queryby", {
        Id: row.id,
      });
      console.log("res协议文档", res);
      if (res.data != null && res.data.length) {
        this.protocolDocumentData = res.data.map((item) => {
          item["protocolDate"] = [];
          item["protocolDate"].push(item.beginDate);
          item["protocolDate"].push(item.endDate);
          return item;
        });
      }
      this.dialogData.protocolDocument_show = true;
    },
  },
  computed: {},
  watch: {
    "dialogData.cur_bus_show"(newVal) {
      if (!newVal) {
        this.formData.comCode = "";
        this.formData.comNameCn = "";
        this.formData.shortName = "";
        this.formData.entTypeChecked = [];
        this.formData.checkedEnterpriseTypes = [];
        this.formData.checkAll = false;
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      }
    },
    "formData.checkedEnterpriseTypes"(newVal) {
      newVal.length == this.formData.enterpriseType.length
        ? (this.formData.checkAll = true)
        : (this.formData.checkAll = false);
    },
  },
  created() {
    this.initData();
  },
});
</script>

<style lang="scss" scoped>
.el-row {
  height: 100%;
}
.in-container {
  border: none;
  height: fit-content;
  padding: 8px 0;
}
.top-container {
  background-color: white;
  padding: 0 8px;
}
.search_btn {
  margin-top: -10px;
  padding-bottom: 8px;
}
.bottom_content {
  border-top: 12px solid #f8f8f8;
  padding: 0 8px;
}
::v-deep .el-form-item__content {
  width: 420px;
  .enterprise_Type {
    margin-right: 6px;
  }
}
::v-deep .el-checkbox.el-checkbox--large .el-checkbox__label {
  font-size: 12px;
}
.type-list {
  .title {
    font-size: 20px;
    padding-left: 20px;
    background-color: rgb(247, 251, 255);
    line-height: 2.5;
  }
}
:deep(.create_business .el-dialog__body) {
  padding-bottom: 0;
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  text-align: center;
  border-top: 1px solid #dee1e6;
}
.btn-box {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
</style>
